<script lang="ts" setup>
import {
    Calendar,
    Location,
    OfficeBuilding,
    Clock,
    Star,
    ArrowRight,
    User,
    Bell,
    Document,
    Notification,
} from "@/utils/icons.js";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";

// 定义组件属性
const props = defineProps({
    hireData: {
        type: Object,
        required: true,
    },
    isActive: {
        type: Boolean,
        default: false,
    },
});

// 定义事件
const emit = defineEmits(["click"]);

// 路由
const router = useRouter();

// 卡片引用
const cardRef = ref(null);

// 收藏状态
const isCollected = ref(false);

// 日期格式化
const formatDateTime = (dateTimeString) => {
    const date = new Date(dateTimeString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
        2,
        "0"
    )} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
};

// 格式化日期（只显示日期）
const formatDate = (dateTimeString) => {
    const date = new Date(dateTimeString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
        2,
        "0"
    )}`;
};

// 格式化时间（只显示时间）
const formatTime = (dateTimeString) => {
    const date = new Date(dateTimeString);
    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
};

// 获取状态样式
const getStatusType = (status) => {
    const statusMap = {
        upcoming: "warning", // 即将开始
        ongoing: "success", // 正在进行
        finished: "info", // 已结束
    };
    return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        upcoming: "即将开始",
        ongoing: "正在进行",
        finished: "已结束",
    };
    return statusMap[status] || "未知状态";
};

// 计算是否是最近活动（7天内）
const isRecentActivity = computed(() => {
    const now = new Date();
    const activityDate = new Date(props.hireData.startTime);
    const diffTime = Math.abs(activityDate.getTime() - now.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays <= 7;
});

// 处理卡片点击
const handleCardClick = () => {
    emit("click");
};

// 收藏/取消收藏
const toggleCollect = (event) => {
    event.stopPropagation();
    isCollected.value = !isCollected.value;
};

// 申请/报名
const handleApply = (event) => {
    event.stopPropagation();
    router.push({
        path: "/schoolHireInfo",
        query: { id: props.hireData.id, action: "apply" },
    });
};

// 查看详情
const viewDetails = (event) => {
    event.stopPropagation();
    router.push({
        path: "/schoolHireInfo",
        query: { id: props.hireData.id },
    });
};
</script>

<template>
    <el-card
        ref="cardRef"
        class="activity-card"
        :class="{ 'is-active': isActive }"
        shadow="hover"
        @click="handleCardClick"
    >
        <!-- 状态标签 -->
        <el-tag v-if="isRecentActivity" class="activity-status-tag" type="danger" effect="dark" size="small">
            新
        </el-tag>

        <!-- 公司信息区域 -->
        <div class="company-section">
            <el-row align="middle" :gutter="16">
                <el-col :span="4">
                    <el-avatar :size="50" :src="hireData.companyLogo" shape="square" class="company-logo">
                        <el-icon><OfficeBuilding /></el-icon>
                    </el-avatar>
                </el-col>
                <el-col :span="20">
                    <div class="company-info">
                        <el-tag type="info" effect="plain" size="small" class="company-type">
                            {{ hireData.companyIndustry || "互联网/IT" }}
                        </el-tag>
                        <h3 class="company-name">{{ hireData.companyName }}</h3>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 活动标题 -->
        <h2 class="activity-title">{{ hireData.title }}</h2>

        <!-- 活动信息 -->
        <el-row class="activity-info">
            <el-col :span="24" class="info-item">
                <el-tooltip content="活动时间" placement="top" :show-after="500">
                    <el-icon color="#409EFF"><Calendar /></el-icon>
                </el-tooltip>
                <span class="item-content"
                    >{{ formatDate(hireData.startTime) }} {{ formatTime(hireData.startTime) }} -
                    {{ formatTime(hireData.endTime || hireData.startTime) }}</span
                >
            </el-col>

            <el-col :span="24" class="info-item">
                <el-tooltip content="活动地点" placement="top" :show-after="500">
                    <el-icon color="#67C23A"><Location /></el-icon>
                </el-tooltip>
                <span class="item-content">{{ hireData.location }}</span>
                <el-tag size="small" type="success" effect="plain" class="activity-mode">
                    {{ hireData.mode || "线下宣讲" }}
                </el-tag>
            </el-col>

            <el-col :span="24" class="info-item target-schools">
                <el-tooltip content="目标院校" placement="top" :show-after="500">
                    <el-icon color="#E6A23C"><User /></el-icon>
                </el-tooltip>
                <div class="schools-tags">
                    <el-tag
                        v-for="(school, index) in hireData.targetSchools"
                        :key="index"
                        size="small"
                        effect="light"
                        class="school-tag"
                    >
                        {{ school }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>

        <!-- 标签 -->
        <div class="tags-area">
            <el-tag
                v-for="(tag, index) in hireData.tags"
                :key="index"
                size="small"
                :type="tag === '名企' ? 'danger' : tag === '互联网' ? 'primary' : 'info'"
                effect="light"
                class="activity-tag"
            >
                {{ tag }}
            </el-tag>
        </div>

        <!-- 活动状态和操作按钮 -->
        <div class="action-section">
            <el-divider content-position="center">
                <span class="status-text" :class="getStatusType(hireData.status)">
                    {{ getStatusText(hireData.status) }}
                </span>
            </el-divider>

            <el-row :gutter="20" class="action-buttons">
                <el-col :span="8">
                    <el-button
                        type="default"
                        size="small"
                        :icon="Star"
                        class="action-button collect-btn"
                        :class="{ 'is-collected': isCollected }"
                        @click="toggleCollect"
                    >
                        {{ isCollected ? "已收藏" : "收藏" }}
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="warning" size="small" :icon="Bell" class="action-button" @click="handleApply">
                        立即报名
                    </el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" size="small" class="action-button" @click="viewDetails">
                        详情
                        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                    </el-button>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<style scoped>
.activity-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid #ebeef5;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: #c6e2ff;
}

.activity-card.is-active {
    border-color: #409eff;
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.2) !important;
}

.activity-status-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    transform: rotate(15deg);
    font-weight: bold;
    padding: 0 8px;
}

.company-section {
    margin-bottom: 16px;
}

.company-logo {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background-color: #f5f7fa;
    border: 2px solid #fff;
}

.company-info {
    display: flex;
    flex-direction: column;
}

.company-type {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: normal;
}

.company-name {
    margin: 5px 0;
    font-size: 16px;
    color: #606266;
    font-weight: 500;
    line-height: 1.2;
}

.activity-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.activity-info {
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.info-item .el-icon {
    margin-right: 8px;
    font-size: 16px;
    margin-top: 3px;
}

.item-content {
    flex: 1;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
}

.activity-mode {
    margin-left: 8px;
}

.target-schools {
    align-items: center;
}

.schools-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}

.school-tag {
    margin-right: 0;
}

.tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.activity-tag {
    font-size: 12px;
    padding: 0 8px;
    margin-right: 0;
}

.status-text {
    font-size: 14px;
    font-weight: 500;
}

.status-text.warning {
    color: #e6a23c;
}

.status-text.success {
    color: #67c23a;
}

.status-text.info {
    color: #909399;
}

.action-buttons {
    padding: 10px 0 0;
}

.action-button {
    width: 100%;
    transition: all 0.3s;
}

.collect-btn.is-collected {
    color: #e6a23c;
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
    .activity-title {
        font-size: 16px;
    }

    .action-buttons .el-col {
        padding: 0 5px;
    }

    .action-button {
        padding: 8px 5px;
        font-size: 12px;
    }
}
</style>
